<!doctype html>
<html lang="zh-CN">

<head>
    <title>个人中心</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/el/index.css">
    <link rel="stylesheet" href="./css/hea-com.css">
    <link rel="stylesheet" href="./css/bind-alipay.css">
    <link rel="stylesheet" href="./css/bind-bank1.css">
    <link rel="stylesheet" href="./css/my.css">
</head>

<body style="background:#F7FBFF;">
    <div id='app' v-cloak>

        <!-- 更换绑定手机号 -->
        <div id='mask' v-if='maskRule==1'></div>
        <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut'>
            <div id='mask-1' v-if='maskRule==1'>
                <div class='mask-con'>
                    <div class='dis-spa edit-tit'>
                        <span style="opacity:0;">1</span>
                        <span>更换绑定手机号</span>
                        <img class='hover' @click='maskRule=false;' src="./img/close.svg" style="width:22px;height:22px;">
                    </div>
                    <div class='mask-con-wrap'>
                        <div class='edit-input'>
                            <input type="text" placeholder="原手机号/账号">
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="密码">
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="新手机号/账号">
                        </div>
                        <div class='dis-spa edit-invi-code'>
                            <input type="text" placeholder="验证码">
                            <span class='hover'>获取验证码</span>
                        </div>
                        <p class='edit-noti'>这里是一条提示内容</p>
                        <div class='edit-sure'>
                            <button>确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 更换绑定手机号 -->

        <!-- 修改登陆密码 -->
        <div id='mask' v-if='maskRule==2'></div>
        <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut'>
            <div id='mask-1' v-if='maskRule==2'>
                <div class='mask-con'>
                    <div class='dis-spa edit-tit'>
                        <span style="opacity:0;">1</span>
                        <span>修改登陆密码</span>
                        <img class='hover' @click='maskRule=false;' src="./img/close.svg" style="width:22px;height:22px;">
                    </div>
                    <div class='mask-con-wrap'>
                        <!-- <div class='edit-input'>
                            <input type="text" placeholder="手机号/账号" v-model='mobile'>
                        </div>
                        <div class='dis-spa edit-invi-code'>
                            <input type="text" placeholder="验证码" v-model='yzmcode'>
                            <span class='hover'>获取验证码</span>
                        </div> -->
                        <div class='edit-input'>
                            <input type="text" placeholder="旧密码" v-model='pas'>
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="新密码（8至20位字母或数字）" v-model='newpas'>
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="确认新密码" v-model='surePas'>
                        </div>
                        <!-- <p class='edit-noti'>这里是一条提示内容</p> -->
                        <div class='edit-sure'>
                            <button @click='sureEditPas'>确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 修改登陆密码 -->

        <!-- 修改交易密码 -->
        <div id='mask' v-if='maskRule==3'></div>
        <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut'>
            <div id='mask-1' v-if='maskRule==3'>
                <div class='mask-con'>
                    <div class='dis-spa edit-tit'>
                        <span style="opacity:0;">1</span>
                        <span v-text="user.PayPassword?'修改交易密码':'设置交易密码'">修改交易密码</span>
                        <img class='hover' @click='maskRule=false;' src="./img/close.svg" style="width:22px;height:22px;">
                    </div>
                    <div class='mask-con-wrap'>
                        <!-- <div class='edit-input'>
                            <input type="text" placeholder="手机号/账号">
                        </div>
                        <div class='dis-spa edit-invi-code'>
                            <input type="text" placeholder="验证码">
                            <span class='hover'>获取验证码</span>
                        </div> -->
                        <div class='edit-input' v-if='user.PayPassword'>
                            <input type="text" placeholder="旧密码" v-model='pas'>
                        </div>
                        <div class='edit-input'>
                            <input type="text" :placeholder="user.PayPassword?'新密码（8至20位字母或数字）':'请输入支付密码（8至20位字母或数字）'" v-model='newpas'>
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="确认密码" v-model='surePas'>
                        </div>
                        <!-- <p class='edit-noti'>这里是一条提示内容</p> -->
                        <div class='edit-sure'>
                            <button @click='editTransPas'>确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 修改交易密码 -->

        <!-- 绑定支付宝账号 -->
        <bind-alipy :open='maskRule==4?true:false' @close_alipy='maskRule=false'></bind-alipy>
        <!-- 绑定支付宝账号 -->

        <!-- 绑定银行卡 -->
        <bind-bank1 :open='maskRule==5?true:false' @close_bank='maskRule=false'></bind-bank1>
        <!-- 绑定银行卡-->

        <!-- 解绑支付宝/银行卡 -->
        <div id='mask' v-if='maskRule=="untying"'></div>
        <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut'>
            <div id='mask-1' v-if='maskRule=="untying"'>
                <div class='mask-con'>
                    <div class='dis-spa edit-tit'>
                        <span style="opacity:0;">1</span>
                        <span>解绑支付宝/银行卡</span>
                        <img class='hover' @click='maskRule=false;' src="./img/close.svg" style="width:22px;height:22px;">
                    </div>
                    <div class='mask-con-wrap'>
                        <div class='untying-wrap'>
                            <h5>支付宝号</h5>
                            <p>18875027096</p>
                            <p>是否解绑此微信号，可能会影响您的充值提现</p>
                            <div class='dis-spa'>
                                <button @click='maskRule=false;'>取消</button>
                                <button>确认绑定</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 解绑支付宝/银行卡 -->

        <!-- <hea-component @bind_alipy="maskRule='4'" @bind_bank="maskRule='5'"></hea-component> -->
        <hea-component @bind_alipy="bindAB='1'" @bind_bank="bindAB='2'" :user_info='user' :user_balance='userBalance'></hea-component>


        <div class='margin-center hea-nav'>
            <div class='dis-cen hover' @click='window.location.href="./index.html";'>
                <img src="./img/left.svg" style="width:20px;height:20px;">
                <span>返回首页</span>
            </div>

        </div>

        <div class='margin-center my-wrap'>
            <div class='my-left-wrap'>
                <div>
                    <img src="./img/ava.png" style="width:50px;height:50px;">
                    <span v-text='handName()'>**</span>
                </div>
                <p class='tit-active'><a href="#account">账户信息</a></p>
                <p><a href="#tranpas">交易密码</a></p>
                <p><a href="#mybill">我的账单</a></p>
                <p><a href="#wallet">绑定支付宝</a></p>
                <p><a href="#backcard">绑定银行卡</a></p>
                <p><a href="#loginre">登陆记录</a></p>
                <p><a href="#">关于</a></p>
            </div>
            <div class='my-right-wrap'>
                <div class='balance-wrap'>
                    <div class='ba-info'>
                        <p>账户余额</p>
                        <p>
                            <span>￥</span>
                            <span v-text='userBalance'>0.00</span>
                        </p>
                    </div>
                    <div class='ba-info'>
                        <p>可提现余额</p>
                        <p>
                            <span>￥</span>
                            <span v-text='userBalance'>0.00</span>
                        </p>
                    </div>
                </div>
                <p class='account-tit'><a name='account'>账户信息</a></p>
                <div class='change-account' style="background:white;">
                    <div class='dis-spa'>
                        <div>
                            <span>头像</span>
                            <img :src="user.HeadImage?user.HeadImage:'./img/ava.png'" style="width:80px;height:80px;">
                        </div>
                        <div class='hover dis-cen' @click='$("#upFile").click();'>
                            <span>上传图片</span>
                            <input type="file" style='position:fixed;left:100000px;' id='upFile'>
                            <img src="./img/right.svg" style="width:20px;height:20px;">
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>绑定手机号</span>
                            <span v-text="user.Mobile?(user.Mobile.slice(0, 4) + '****' + user.Mobile.slice(7, 11)):'*******'">****</span>
                        </div>
                        <div class='hover dis-cen' @click='maskRule=1;'>
                            <span v-text='user.Mobile?"更换绑定":"绑定手机号"'>更换绑定</span>
                            <img src="./img/right.svg" style="width:20px;height:20px;">
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>登陆密码</span>
                            <span>***********</span>
                        </div>
                        <div class='hover dis-cen' @click='maskRule=2;'>
                            <span>修改密码</span>
                            <img src="./img/right.svg" style="width:20px;height:20px;">
                        </div>
                    </div>
                </div>
                <p class='account-tit'><a name="tranpas">交易密码</a></p>
                <div class='change-account' style="background:white;">
                    <div class='dis-spa'>
                        <div>
                            <span>交易密码</span>
                            <span>***********</span>
                        </div>
                        <div class='hover dis-cen' @click="maskRule='3'">
                            <span v-text="user.PayPassword?'修改交易密码':'设置交易密码'">修改交易密码</span>
                            <img src="./img/right.svg" style="width:20px;height:20px;">
                        </div>
                    </div>
                </div>
                <div class='dis-spa account-tit' style="padding:20px;">
                    <a name='mybill'>我的账单</a>
                    <div class='dis-cen filter-bill'>
                        <!-- <p class='dis-cen hover' @click=''>
                            <img src="./img/no.png" style="width:12px;height:12px;">
                            <span>只看充值</span>
                        </p>
                        <p class='dis-cen hover'>
                            <img src="./img/no.png" style="width:12px;height:12px;">
                            <span>只看提现</span>
                        </p> -->
                        <p class='dis-cen hover' @click="logType=2;">
                            <img :src="logType==2?'./img/yes.png':'./img/no.png'" style="width:12px;height:12px;">
                            <span>只看中奖</span>
                        </p>
                        <p class='dis-cen hover' @click="logType=1;">
                            <img :src="logType==1?'./img/yes.png':'./img/no.png'" style="width:12px;height:12px;">
                            <span>只看下注</span>
                        </p>
                    </div>
                </div>
                <div class='change-account' style="background:white;">

                    <div class='dis-spa' v-for="(val,index) in billList" :key='index'>
                        <div>
                            <span v-text='billFont()'>余额充值</span>
                            <span class='ac-year' v-text='val.LogTime'>2018-12-24</span>
                        </div>
                        <div class='hover dis-cen'>
                            <span class='mon-color' v-text='val.Amount+"元"'>+0.00元</span>
                        </div>
                    </div>
                    <!-- <div class='dis-spa'>
                        <div>
                            <span>余额充值</span>
                            <span class='ac-year'>2018-12-24</span>
                        </div>
                        <div class='hover dis-cen'>
                            <span class='mon-color'>+1000.00元</span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>时时彩中奖</span>
                            <span class='ac-year'>2018-12-24</span>
                        </div>
                        <div class='hover dis-cen'>
                            <div class='dis-cen' style="margin-right:50px;">
                                <span>待解锁</span>
                                <img src="./img/why.svg" style="width:15px;height:15px;margin-left:5px;">
                            </div>
                            <span class='mon-color-green'>+1000.00元</span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>时时彩下注</span>
                            <span class='ac-year'>2018-12-24</span>
                        </div>
                        <div class='hover dis-cen'>
                            <span class='mon-color-red'>-1000.00元</span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>余额提现</span>
                            <span class='ac-year'>2018-12-24</span>
                        </div>
                        <div class='hover dis-cen'>
                            <span class='mon-color-red'>-1000.00元</span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>余额充值</span>
                            <span class='ac-year'>2018-12-24</span>
                        </div>
                        <div class='hover dis-cen'>
                            <span class='mon-color-green'>-1000.00元</span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>时时彩中奖</span>
                            <span class='ac-year'>2018-12-24</span>
                        </div>
                        <div class='hover dis-cen'>
                            <div class='dis-cen' style="margin-right:50px;">
                                <span class='mon-color-green'>已解锁</span>
                                <img src="./img/why.svg" style="width:15px;height:15px;margin-left:5px;">
                            </div>
                            <span class='mon-color-green'>+1000.00元</span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>时时彩下注</span>
                            <span class='ac-year'>2018-12-24</span>
                        </div>
                        <div class='hover dis-cen'>
                            <span class='mon-color-red'>-1000.00元</span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>余额提现</span>
                            <span class='ac-year'>2018-12-24</span>
                        </div>
                        <div class='hover dis-cen'>
                            <span class='mon-color-red'>-1000.00元</span>
                        </div>
                    </div> -->
                </div>
                <p class='dis-cen page-com'>
                    <a @click='prePage' class='hover'>上一页</a>
                    <a @click='nextPage' class='hover'>下一页</a>
                    <!-- <a href="">-</a>
                    <a href="">首页</a>
                    <a href="">1</a>
                    <a href="" class='active'>2</a>
                    <a href="">3</a>
                    <a href="">...</a>
                    <a href="">12</a>
                    <a href="">12</a>
                    <a href="">12</a>
                    <a href="">尾页</a>
                    <a href="">+</a> -->
                </p>
                <p class='account-tit'><a name='wallet'>绑定支付宝</a></p>
                <div class='change-account' style="background:white;">
                    <div class='dis-spa'>
                        <div>
                            <span>支付宝账号</span>
                            <span>暂无绑定支付宝账号</span>
                        </div>
                        <div class='hover dis-cen  bank-card'>
                            <p @click='maskRule="untying"'>解绑</p>
                            <p class='hover dis-cen' @click='maskRule=4;'>
                                <span>立即绑定</span>
                                <img src="./img/right.svg" style="width:20px;height:20px;">
                            </p>
                        </div>
                    </div>
                </div>
                <p class='account-tit'><a name="backcard">绑定银行卡（最多5张）</a></p>
                <div class='change-account' style="background:white;">
                    <div class='dis-spa' v-for="(val,index) in 5" :key='index'>
                        <div>
                            <span>银行卡1</span>
                            <span v-if="bankList[index]">
                                <span style='color:#333333;' v-text='bankList[index]'>15456***************452</span>&nbsp;&nbsp;<span>(中国工商银行)</span>
                            </span>
                            <span v-else>
                                <span style='color:#333333;'>暂无绑定银行卡</span>
                            </span>
                        </div>
                        <div class='dis-cen bank-card '>
                            <p @click='maskRule="untying"' v-if="bankList[index]">解绑</p>
                            <p v-else style="opacity:0">1</p>
                            <p class='hover dis-cen' @click='goBindBank'>
                                <span>立即绑定</span>
                                <img src="./img/right.svg" style="width:20px;height:20px;">
                            </p>
                        </div>
                    </div>
                </div>
                <p class='account-tit'><a name="loginre">登陆记录</a></p>
                <div class='change-account' style="background:white;">
                    <div class='dis-spa'>
                        <div>
                            <span>注册时间</span>
                            <span v-text='user.RegTime'>
                               2018-12-15 16：42：31
                            </span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>最近登陆</span>
                            <span v-text='user.LoginTime'>
                                2018-12-15 16：42：31
                            </span>
                        </div>
                    </div>
                    <div class='dis-spa'>
                        <div>
                            <span>最近IP</span>
                            <span v-text='user.LoginIP'>
                                113.251.21.18
                            </span>
                        </div>
                    </div>
                    <!-- <div class='dis-spa'>
                        <div>
                            <span>最近地址</span>
                            <span>
                                重庆市电信
                            </span>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>

    </div>
    <script src="./js/com.js"></script>
    <script src='./js/jquery.min.js'></script>
    <script src="./js/vue.min.js"></script>
    <script src="./component/hea.js"></script>
    <script src="./component/bindAlipay.js"></script>
    <script src="./component/bindBank.js"></script>
    <script src="./js/el/index.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                //各种弹窗控制 false:关闭全部弹窗  1：更换绑定手机号  2:修改登陆密码  3:修改交易密码  4:绑定支付宝  5：绑定银行卡第一步  untying：解绑支付宝/银行卡  
                maskRule: false,
                //绑定银行卡 - 选择证件类型
                seleCerType: '',
                //绑定银行卡 - 选择银行卡
                seleCard: '',
                //绑定银行卡 - 选择银行卡类型
                seleCardType: '',
                //用户信息
                user: JSON.parse(localStorage.getItem('shi_user')),
                //用户余额
                userBalance: 0,
                //旧密码
                pas: '',
                //新密码
                newpas: '',
                //确认新密码
                surePas: '',
                //获取纪录的类型   1:投注    2：中奖
                logType: 1,
                //最后一个日志编号，第一次查询是null
                logNum: null,
                //账单信息
                billList: [],
                //页码数组
                pageArr: [],
                //上一页 页码承载
                preTran: null,
                //没有数据了
                noData: false,
                //银行卡列表
                bankList: [],
            },
            created: function() {
                // {"Data":{"Mobile":"123","NickName":"","HeadImage":"","PayPassword":true,"RegTime":"2019-01-24 23:10:52","LoginTime":"2019-01-30 09:34:53","LoginIP":"113.251.19.47"},"Status":0}
                if (!_getItem('token')) {
                    this.$message.error('请前往登录！');
                    setTimeout(function() {
                        _openHref({
                            url: './login.html'
                        });
                    }, 1500);
                } else {
                    //获取用户余额
                    this.getBalance();
                    //获取账单纪录
                    this.getBill(null, true);
                    //获取银行卡信息
                    this.getBanks();
                }
            },
            watch: {
                logType: function() {
                    this.pageArr = [];
                    this.preTran = null;
                    this.logNum = null;
                    this.getBill(null, true);
                }
            },
            mounted: function() {

            },
            methods: {
                //处理用户名
                handName: function() {
                    if (this.user.Mobile) {
                        return this.user.Mobile.slice(0, 4) + '****' + this.user.Mobile.slice(7, 11);
                    } else if (this.user.NickName) {
                        return this.user.NickName;
                    } else {
                        return '';
                    }
                },
                //获取用户余额
                getBalance: function() {
                    var This = this;
                    AJAX({
                        url: GET_BANLANCE,
                        token: true,
                        app: this,
                        success: function(data) {
                            if (data.Status == '0') {
                                var ban = String(data.Data);
                                if (ban.indexOf('.') == -1) {
                                    ban += '.00';
                                }
                                This.userBalance = ban;
                            } else {
                                This.$message.error('获取用户余额失败！');
                            }
                        }
                    })
                },
                //修改登录密码
                sureEditPas: function() {
                    var This = this;
                    if (!this.pas) {
                        This.$message.error('请输入原密码！');
                        return;
                    }
                    if (!this.newpas) {
                        This.$message.error('请输入新密码！');
                        return;
                    }
                    if (this.newpas != this.surePas) {
                        This.$message.error('两次密码输入不一致！');
                        return;
                    }
                    AJAX({
                        url: UPDATA_PAS,
                        token: true,
                        app: this,
                        data: {
                            password: this.pas,
                            newPassword: this.newpas
                        },
                        success: function(data) {
                            This.pas = '';
                            This.newpas = '';
                            This.surePas = '';
                            if (data.Status == '0' && data.Data) {
                                This.$message.error('修改登录密码成功！');
                                This.maskRule = false;
                            } else {
                                This.$message.error('修改登录密码失败！');
                            }
                        }
                    })
                },
                //修改支付密码
                editTransPas: function() {
                    var This = this;
                    if (this.user.PayPassword && !this.pas) {
                        This.$message.error('请输入原密码！');
                        return;
                    }
                    if (!this.newpas) {
                        var notice = '请输入密码!';
                        if (this.user.PayPassword) {
                            notice = '请输入新密码!';
                        }
                        This.$message.error(notice);
                        return;
                    }
                    if (this.newpas != this.surePas) {
                        This.$message.error('两次密码输入不一致！');
                        return;
                    }
                    AJAX({
                        url: UPDATE_TRANS_PAS,
                        token: true,
                        app: this,
                        data: {
                            password: this.user.PayPassword ? this.pas : null,
                            newPassword: this.newpas
                        },
                        success: function(data) {
                            This.pas = '';
                            This.newpas = '';
                            This.surePas = '';
                            if (data.Status == '0' && data.Data) {
                                var msg = '设置支付密码成功！';
                                if (This.user.PayPassword) {
                                    msg = '修改支付密码成功！';
                                }
                                This.$message.error(msg);
                                This.maskRule = false;
                            } else {
                                var msg1 = '设置支付密码失败！';
                                if (This.user.PayPassword) {
                                    msg1 = '修改支付密码失败！';
                                }
                                This.$message.error(msg1);
                            }
                        }
                    });
                },
                //上一页
                prePage: function() {
                    if (this.pageArr.length > 0) {
                        this.getBill(this.pageArr.pop(), true);
                    } else {
                        this.getBill(null, true);
                    }
                },
                //下一页
                nextPage: function() {
                    this.getBill(this.logNum, false);
                },
                //获取账单纪录
                getBill: function(num, pre) {
                    var This = this;
                    if (pre) {
                        this.noData = false;
                    }
                    if (!pre && this.noData) {
                        this.$message.error('已经没有数据了！');
                        return;
                    }
                    AJAX({
                        url: LOG_LIKE,
                        token: true,
                        app: this,
                        data: {
                            logType: this.logType,
                            lastLogId: num,
                            pageSize: 10,
                            desc: true
                        },
                        success: function(data) {
                            if (data.Status == 0) {
                                if (!pre && num) {
                                    This.pageArr.push(This.preTran);
                                }
                                if (!data.Data || data.Data.length < 10) {
                                    //没有数据了
                                    This.noData = true;
                                } else {
                                    This.logNum = data.Data[9].LogID;
                                    This.preTran = num;
                                }
                                if (data.Data) {
                                    This.billList = data.Data;
                                } else {
                                    This.billList = [];
                                }
                            } else {
                                This.$message.error('获取账单信息失败！');
                            }
                        }
                    });
                },
                //得到银行卡信息
                getBanks: function() {
                    var This = this;
                    AJAX({
                        url: GETBankS,
                        token: true,
                        app: this,
                        success: function(data) {
                            if (data.Status == 0) {
                                if (data.Data) {
                                    This.bankList = data.Data;
                                }
                            } else {
                                This.$message.error('获取您的银行卡信息失败');
                            }
                        }
                    });
                },
                //账单的类型汉字化
                billFont: function() {
                    switch (String(this.logType)) {
                        case '1':
                            return '下注记录';
                            break;
                        case '2':
                            return '中奖记录';
                            break;
                    }
                },
                //綁定銀行卡
                goBindBank: function() {
                    this.maskRule = 5;
                }
            }
        });
    </script>

</body>

</html>